<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">

</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu style="width: 1200px;margin: 0 auto" mode="horizontal"
                     background-color="#0aa1ed" text-color="#fff"
                     active-text-color="#f00">
                <el-menu-item index="1">码翔网络登录页面</el-menu-item>

            </el-menu>
            </el-row>
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <!--登录表单-->
            <el-row gutter="20">
                <el-col style="margin: 10px 0" span="12">
                    <el-input v-model="mbphone" placeholder="请输入手机号"></el-input>
                </el-col>
                <el-col style="margin: 10px 0" span="4">
                    <el-button type="primary" plain @click="handleSMSCode">发送验证码</el-button>
                </el-col>
            </el-row>
            <!--商品列表结束-->
        </el-main>

    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                mbphone: ''
            }
        },
        methods:{
            handleSMSCode(mbphone){
                console.log(this.mbphone);
            }
        }
    })
</script>
</html>
